import radColor, { getRandom} from '../util/radColor'
const divContainter = document.getElementById('divContainer')
const divCenter = document.getElementById('divCenter')

/**
 * 往页面上添加数字
 * @param {*} number 
 * @param {*} isPrime 是否素数
 */
export default function (number, isPrime) {
    const span = document.createElement('span')
    span.innerText = number
    const color = radColor()
    if (isPrime) { span.style.color = color }
    divContainter.appendChild(span)
    createCenterNumber(number, isPrime, color)
}

function createCenterNumber(number, isPrime, color) {
    divCenter.innerText = number
    if (isPrime) { // 素数特殊处理
        const div = document.createElement('div')
        div.className = 'center'
        div.style.color = color
        div.innerText = number
        document.body.appendChild(div)
        
        // 加入div后，强行让页面重新渲染
        // 只有读取某个元素的位置或尺寸信息，则会导致浏览器重新渲染 重排reflow
        getComputedStyle(div).left

        div.style.transform = `translate(${getRandom(-300, 300)}px, ${getRandom(-300, 300)}px)`;
        div.style.opacity = '0'
    }
}